<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/template-web.js"></script>
    <!-- 1.导入art-template -->
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <p>art-template 的使用步骤：
        <br>导入art-template
        <br>定义数据
        <br>定义模板
        <br>调用template函数 template('模板的ID', 需要渲染的数据对象)
    </p>




    <div class="container">

    </div>


    <!-- 3.定义模板的HTML结构，必须定义到script标签中 -->
    <script type="text/html" id="tpl">
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>

        模板引擎的标准语法：
        <br>1.输出 {{name}}
        <br>2.原文输出 {{@ test}}
        <br>3.if语句 {{if flag === 0}} flag的值是0 {{else if flag === 1}} flag的值是1 {{/if}}
        <br>4.循环语句
        <ul> {{each hobby}}
            <li>索引是:{{$index}}，循环项是:{{$value}}</li>{{/each}}
        </ul>
        <br>5.过滤器过滤器语法类似管道操作符，它的上一个输出作为下一个输入。
        <br>这是不用过滤器的内容：{{regTime}}
        <br>这是用过滤器的内容：{{ regTime | dataFormat}}




    </script>


    <script>
        //过滤器定义 一定要放在数据定义之前
        template.defaults.imports.dataFormat = function(data) {
            let y = data.getFullYear();
            let m = data.getMonth() + 1;
            let d = data.getDate();

            //注意过滤器最后一定要加上返回值
            return y + '-' + m + '-' + d;
        };
        // 2.定义数据
        var data = {
            name: '张三',
            age: 20,
            test: '<h3>测试原文输出</h3>',
            flag: 1,
            hobby: ['吃饭', '睡觉', '写代码'],
            regTime: new Date()
        };
        // 4.调用template函数 返回值是渲染好的HTML字符串
        var html = template('tpl', data);
        console.log(html);
        // 5.把渲染好的HTML字符串放到页面中
        $('.container').html(html);
    </script>
</body>

</html>